<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Ais</title>
    <style>
    body {
        margin: 0;
        padding: 0;
        height: 100%;
    }

    table {
        border-collapse: collapse;
        border-spacing: 0;
    }

    .container {
        height: 100%;
    }

    .headLine {
        text-align: center;
        font-size: 24px;
        padding: 5%;
        font-weight: bold;
    }

    .content {
        width: 80%;
        margin: 2% auto;
    }

    .search-content {
        width: 100%;
        padding-bottom: 3%;
        display: -webkit-box;
        /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */
        display: -moz-box;
        /* 老版本语法: Firefox (buggy) */
        display: -ms-flexbox;
        /* 混合版本语法: IE 10 */
        display: -webkit-flex;
        /* 新版本语法: Chrome 21+ */
        display: flex;
        height: 40px;
        line-height: 40px;
        justify-content: center;
    }

    .search-content div {
        width: 20%;
        text-align: center;
    }

    .search-content input {
        padding: 5px 0;
        width: 50%;
        border: 1px solid #e4e4e4;
    }

    .search-btn span {
        background-color: #9b0f0f;
        color: #fff;
        padding: 5px 10px;
        border-radius: 5px;
        cursor: pointer;
        margin-right: 20px;
    }


    .data-content table {
        width: 100%;
        border: 1px solid #e4e4e4;
    }

    .data-content table th,
    .data-content table td {
        width: 25%;
        text-align: center;
        border: 1px solid #e4e4e4;
        padding: 10px;
    }
    </style>
</head>

<body>
    <div class="container">
        <div class="headLine">船舶数据统计</div>
        <div class="content">
            <div class="search-content">
                <div>
                    <label for="">年：</label>
                    <input type="text" class="year">
                </div>
                <div>
                    <label for="">月：</label>
                    <input type="text" class="month">
                </div>
                <div>
                    <label for="">日：</label>
                    <input type="text" class="day">
                </div>
                <div class="search-btn">
                    <span onclick="searchStatistics();">查询</span>
                    <span onclick="clearStatistics();">清除</span>
                </div>
            </div>
            <div class="data-content">
                <table>
                    <thead>
                        <tr>
                            <th colspan="2">@ais_gps@(动态信息)</th>
                            <th colspan="2">@ais_static@(静态信息)</th>
                        </tr>
                        <tr>
                            <th>数据总数</th>
                            <th>船舶总数</th>
                            <th>数据总数</th>
                            <th>船舶总数</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td class="ais_gps">0</td>
                            <td class="ais_gps_ex_re">0</td>
                            <td class="ais_static">0</td>
                            <td class="ais_static_ex_re">0</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <script>
    let winHeight = document.documentElement.clientHeight;
    document.getElementsByClassName('container')[0].style.height = winHeight + 'px';
    let yearEle = document.getElementsByClassName('year')[0];
    let monthEle = document.getElementsByClassName('month')[0];
    let dayEle = document.getElementsByClassName('day')[0];
    let timer = null;

    const getDate = () => {
        let date = new Date();
        let month = date.getMonth() + 1;
        let day = date.getDate();
        return ('year=' + date.getFullYear() + '&month=' + (month < 10 ? '0' + month : month) + '&day=' + (day < 10 ? ('0' + day) : day));
    }

    const getAll = (ais) => {
        let allAis = 0;
        for (let i in ais) {
            allAis += parseInt(ais[i]);
        }
        return allAis;
    }

    const getStatistics = async(url) => {
        try {
            let response = await fetch(url);
            let data = await response.json();
            let ais_gps = data['ais_gps'];
            let ais_gps_all = getAll(ais_gps);
            let ais_gps_ex_re = data['ais_gps_ex_re'];
            let ais_gps_ex_re_all = getAll(ais_gps_ex_re);
            let ais_static = data['ais_static'];
            let ais_static_all = getAll(ais_static);
            let ais_static_ex_re = data['ais_static_ex_re'];
            let ais_static_ex_re_all = getAll(ais_static_ex_re);
            document.getElementsByClassName('ais_gps')[0].innerHTML = ais_gps_all;
            document.getElementsByClassName('ais_gps_ex_re')[0].innerHTML = ais_gps_ex_re_all;
            document.getElementsByClassName('ais_static')[0].innerHTML = ais_static_all;
            document.getElementsByClassName('ais_static_ex_re')[0].innerHTML = ais_static_ex_re_all;
        } catch (e) {
            console.error(e);
        }
    }

    const searchStatistics = () => {
        let year = yearEle.value;
        let month = monthEle.value;
        let day = dayEle.value;
        let url = '/ais/get';
        let putBool = false;
        if (!!year) {
            if (/^\d{4}$/.test(year)) {
                putBool = true;
                url += '?year=' + year;
                if (!!month && /^\d{1,2}$/.test(month) && parseInt(month) > 0 && parseInt(month) < 13) {
                    // 符合
                    putBool = true;
                    url += '&month=' + month;
                    if (!!day && /^\d{1,2}$/.test(day) && parseInt(day) > 0 && parseInt(day) < 32) {
                        putBool = true;
                        url += '&day=' + day;
                    } else {
                        day == '' ? putBool = true : putBool = false;
                    }
                } else {
                    (month == '' && day == '') ? putBool = true: putBool = false;
                }
            } else {
                // 不符合
                putBool = false;
            }
        } else if (!!month) {
            if (/^\d{1,2}$/.test(month) && parseInt(month) > 0 && parseInt(month) < 13) {
                putBool = true;
                url += '?month=' + month;
                if (!!day && /^\d{1,2}$/.test(day) && parseInt(day) > 0 && parseInt(day) < 32) {
                    putBool = true;
                    url += '&day=' + day;
                } else {
                    day == '' ? putBool = true : putBool = false;
                }
            } else {
                // 不符合
                putBool = false;
            }
        } else if (!!day) {
            if (/^\d{1,2}$/.test(day) && parseInt(day) > 0 && parseInt(day) < 32) {
                putBool = true;
                url += '?day=' + day;
            } else {
                // 不符合
                putBool = false;
            }
        } else {
            alert('请输入查询条件');
        }
        putBool ? (getStatistics(url, 'search') && clearInterval(timer)) : alert('请输入正确的查询条件');
    }

    const clearStatistics = () => {
        if (yearEle.value || monthEle.value || dayEle.value) {
            yearEle.value = '';
            monthEle.value = '';
            dayEle.value = '';
            getStatistics('/ais/get?' + getDate());
            timer = setInterval(() => {
                if (yearEle.value == '' || monthEle.value == '' || dayEle.value == '') getStatistics('/ais/get?' + getDate());
            }, 1000 * 60); //一分钟刷新一次
        }
    }

    getStatistics('/ais/get?' + getDate());

    timer = setInterval(() => {
        if (yearEle.value == '' || monthEle.value == '' || dayEle.value == '') getStatistics('/ais/get?' + getDate());
    }, 1000 * 60); //一分钟刷新一次
    </script>
</body>

</html>